<!--
 * @Author: Lizhenyu
 * @Date: 2021-07-08 15:35:04
 * @FilePath: \usp-osm-frondend\src\views\productCenter\attribute\index.vue
-->
<template>
  <div class="source" v-loading="pageLoading" element-loading-text="加载中...">
    <v-notes>
      <el-form label-width="160px" :model="searchModel" ref="searchForm" class="search-form" size="small">
        <el-row class="search-row">
          <el-col :span="24">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="属性名称" prop="attributeName">
                  <el-input
                    placeholder="请输入"
                    v-model="searchModel.attributeName"
                    clearable
                    @keyup.enter.native.prevent="searchAttribute"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="属性类型" prop="type">
                  <el-select v-model="searchModel.type" placeholder="请选择" popper-class="select-class" :popper-append-to-body="false">
                    <el-option key label="全部" value></el-option>
                    <el-option
                      v-for="item in attributetypes"
                      :key="item.dicCode"
                      :label="item.dicName"
                      :value="item.dicCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否必须" prop="required">
                  <el-select v-model="searchModel.required" placeholder="Please Select" popper-class="select-class" :popper-append-to-body="false">
                    <el-option key label="全部" value></el-option>
                    <el-option
                      v-for="item in requiredList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="search-row">
          <el-col :span="8" :offset="16" style="text-align:right;">
            <el-button
              @click="resetForm('searchForm')"
              icon="el-icon-refresh-left"
              class="white-btn"
            >重置</el-button>
            <el-button
              @click="searchAttribute"
              icon="el-icon-search"
              class="dark-btn search-btn"
            >搜索</el-button>
          </el-col>
        </el-row>
        <!-- Filter start -->
      </el-form>
    </v-notes>
    <div class="mb-lg">
      <v-table
        :data="tableData"
        ref="multipleTable"
        :listLoading="listLoading"
        :loadingText="loadingText"
        :paginationTotal="total"
        v-on:pageSizeChange="pageSizeChange"
        v-on:currentPageChange="currentPageChange"
        border
        pagination
      >
      <div slot="header">
        <el-button
          v-if="$auth('commodityCenter:propertyManagement:add')"
          @click="add"
          icon="el-icon-plus"
          class="dark-btn"
          style="margin-bottom:0 !important"
        >新增</el-button>
      </div>
        <el-table-column label="属性名称" align="center" min-width="120" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="toDetail(scope.row)" class="colorLink">{{scope.row.attributeName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否必须" align="center" min-width="80">
          <template slot-scope="scope">
            <span >
              {{ scope.row.required === '1' ? '是' : '否' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="属性类型" align="center" min-width="110" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{ getDictionaryNameByCode('SPUATTRIBUTE', scope.row.attributeType) }}</template>
        </el-table-column>
        <el-table-column label="后台类目数" min-width="110" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top" v-if="scope.row.responseCatalogNameVoList" popperClass="table-popper">
              <span v-for="(item,index) in scope.row.responseCatalogNameVoList" :key="index">
                {{item.catalogName}}
                <span v-if="index!=scope.row.responseCatalogNameVoList.length-1">/<br></span>
              </span>
              <div slot="reference" class="name-wrapper green">{{scope.row.catalogCount}}</div>
            </el-popover>
            <span v-else>{{ scope.row.catalogCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" min-width="130px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center" min-width="130px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" align="center" min-width="100px" fixed="right">
          <template slot-scope="scope">
            <span class="colorLink" @click="editAttribute(scope.row)">编辑</span>
          </template>
        </el-table-column>
      </v-table>
    </div>
  </div>
</template>

<script>
import VNotes from '@/components/Notes/index'
import VTable from '@/components/PageTable/index'
import { getAttribute } from '@/api/attribute'
import { mapGetters } from 'vuex'
import { common } from '@/mixins/common'
import { parseTime } from '@/utils'
export default {
  name: 'attributeindex',
  components: {
    VTable,
    VNotes
  },
  mixins: [common],
  data () {
    return {
      pageLoading: false,
      searchModel: {
        displayStart: 0, // 开始查询条数
        displayLength: 10, // 每页展示条数
        attributeName: '', // 属性名称
        type: '',
        required: ''
      },
      tableData: [],
      listLoading: false,
      loadingText: '加载中...',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      requiredList: [
        {
          id: 1,
          value: '1',
          label: '是'
        },
        {
          id: 2,
          value: '0',
          label: '否'
        }
      ],
      attributetypes: []
    }
  },
  mounted () {
    this.fetchList()
    this.attributetypes = this.lookupItems.SPUATTRIBUTE
  },
  computed: {
    ...mapGetters(['lookupItems', 'roles'])
  },
  methods: {
    searchAttribute () {
      this.searchModel.displayStart = 0
      this.$refs.multipleTable.restPage()
      this.fetchList()
    },
    fetchList () {
      if (!this.$auth('commodityCenter:propertyManagement:list')) {
        // 权限控制
        this.$alert('您没有权限。')
        return false
      }
      // attribute列表查询
      const self = this
      this.listLoading = true
      getAttribute(self.searchModel)
        .then(response => {
          self.listLoading = false
          // 调用查询接口
          const data = response
          if (data) {
            const obj = data.obj
            this.tableData = obj.data || []
            self.total = obj.total
            self.tableData.forEach(item => {
              // 从数据字典中匹配attributeType
              item.updateTime = parseTime(item.updateTime)
              item.createTime = parseTime(item.createTime)
              // const MDSETYPE = this.lookupItems.MDSETYPE
              // const arr = MDSETYPE.filter(v => v.dicCode === item.attributeType)
              // if (arr && arr.length) {
              //   item.attributeType = arr[0].dicName
              // }
            })
          } else if (Number(data.code) === 0) {
            this.$confirm(data.msg, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          } else {
            this.$confirm(this.$t(data.code), {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        })
    },
    pageSizeChange (size) {
      this.searchModel.displayLength = size
      this.fetchList()
    },
    currentPageChange (curPage) {
      this.searchModel.displayStart = curPage - 1
      this.fetchList()
    },
    resetForm (formName) {
      /* this.isFilter = false */
      this.searchModel.type = ''
      this.searchModel.required = ''
      this.searchModel.attributeName = ''
      this.searchAttribute()
    },
    editAttribute (row) {
      if (!this.$auth('commodityCenter:propertyManagement:modify')) {
        // 权限控制
        this.$alert('您没有权限。')
        return false
      }
      this.$router.push({ name: 'addAttribute', params: { id: row.id, type: 'edit' } })
    },
    toDetail (row) {
      if (!this.$auth('commodityCenter:propertyManagement:detail')) {
        // 权限控制
        this.$alert('您没有权限。')
        return false
      }
      this.$router.push({ name: 'addAttribute', params: { id: row.id, type: 'detail' } })
    },
    add () {
      this.$router.push({ name: 'addAttribute', params: { id: '' } })
    }
  }
}
</script>

<style>

</style>
